<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闭包应用-防抖节流</title>
</head>
<style>
    body {
        margin-top: 50px;
    }
</style>

<body>
    <input type="text" id="inputA">
    <br>
    <input type="text" id="inputB">
    <br>


    <script>
        let inputA = document.getElementById('inputA')
        let inputB = document.getElementById('inputB')

        function ajax(cotent) {
            console.log(cotent)
        }
        // 通用的函数 抽象 把任何函数减少执行频率
        function debounce(fn, delay) { //函数的返回值也是一个函数，高级函数
            // let id = null
            return function (args) {
                // 定时器返回ID
                //fn 自由变量 一等对象 给对象添加ID属性
                if (fn.id) {
                    clearTimeout(fn.id)
                }
                clearTimeout(fn.id)

                fn.id = setTimeout(function () {
                    fn(args)
                }, delay)
            }

        }
        /*  inputA.addEventListener('keyup', function (event) {
             // 耗时性的操作
             //google suggest 搜索建议
             //图片懒加载 scroll + getBoundingClientRect() 触发频率太高，服务器容易宕机
             // console.log(event.target.value)
             //为什么要减少触发频率？ 
             // 因为没有必要？ 用户意图是以单词为单位，而不是字母
             ajax(event.target.value)
         }) */

        //利用高阶函数 耗时函数-> 变成闭包的自由变量 -> 返回一个新函数，频繁执行
        let dobounceAjax = debounce(ajax, 1000)
        inputB.addEventListener('keyup', function (event) {
            dobounceAjax(event.target.value)
        }
        )
       /*  window.addEventListener('resize', () => {
            console.log("窗口你变了！");
        }); */
        function throttle(fn, delay) {
    let last = 0;
    return function (...args) {
        const now = Date.now();
        if (now - last >= delay) {
            fn.apply(this, args);
            last = now;
        }
    };
}

// 使用节流包装一个窗口大小监听函数
const smartResize = throttle((width) => {
    console.log("当前窗口宽度:", width);
}, 1000);

// 绑定 resize 事件
window.addEventListener('resize', () => {
    smartResize(window.innerWidth);
});
    </script>
</body>

</html>